<template>
  <div id="manageItemIn">
    <template>
      <template  style="margin-top: 15px;width: 30%">
        <el-input placeholder="物资名称" @keyup.native.enter="find(donationName)" v-model="donationName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="find(donationName)"></el-button>
        </el-input>
      </template>
      <!--      <div style="margin-top: 20px">-->
      <!--        <el-button @click="addItem()">新增</el-button>-->
      <!--        <el-button @click="deleteItemList()">删除</el-button>-->
      <!--      </div>-->

      <el-table
              ref="multipleTable"
              :data="itemInDetailVO"
              tooltip-effect="dark"
              style="width: 100%;margin-top: 10px"
              :border=true>

        <el-table-column
                label="编号"
                width="100">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column
                prop="itemName"
                label="物资名称"
                width="250">
        </el-table-column>
        <el-table-column
                prop="count"
                label="捐赠数量"
                width="250">
        </el-table-column>
        <el-table-column
                prop="username"
                label="捐赠人"
                width="250">
        </el-table-column>
        <el-table-column
                prop="applyFile"
                label="申请文件"
                width="250">
        </el-table-column>
        <el-table-column
                prop="checkName"
                label="经手人"
                width="250">
        </el-table-column>
        <el-table-column
                prop="gmtCreate"
                label="入库时间"
                width="250">
        </el-table-column>
      </el-table>

    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        donationName:'',
        name:'',
        img:'',
        itemInDetailVO: [],
        multipleSelection: [],
      }
    },
    created() {
      this.getData();
    },

    methods: {
      getData(){
        // 获取缓存中的user对象
        this.user = JSON.parse(localStorage.getItem('user'))
        //发请求获取所有分类信息
        let url = "http://176.17.10.223:18085/apply/selectOut?keyword=";
        this.axios.get(url).then( (response)=> {
          this.itemInDetailVO = response.data.data;
          console.log("经手人" + this.itemInDetailVO.checkName)
        })
      },
      // 查找特定物资名称
      find(donationName){
        if (donationName != ''){
          let url = "http://176.17.10.223:18085/apply/selectOut?keyword="+donationName;
          let data = 'keyword='+ donationName;
          this.axios.get(url).then( (response)=> {
            // 如果查询到的不是空数据
            if (response.data.data != null){
              // 先清空用户数组
              this.itemInDetailVO=[];
              // 清空搜索的用户
              this.donationName = '';
              this.itemInDetailVO = response.data.data;
            }else {
              this.$message({
                message: '该用户不存在',
                type: 'error'
              });
            }
          })
        }else {
          // 当搜索的用户是空的时候  需要再执行一次方法拿到数据
          this.getData();
        }
      },
    },
  }
</script>
<style>
  .el-input-group{
    margin: 0 40%;
    position: center;
    width: auto;
  }
  .el-input-group--append .el-input__inner, .el-input-group__prepend {
    width: 300px;
  }
</style>